<template>
    <van-nav-bar left-arrow @click-left="onClickLeft" v-model="fileList" title="我的资料" />
    <!-- 编辑资料 -->
    <div class="edit-box">
        <!-- <van-uploader :after-read="afterRead" /> -->
        <van-uploader v-model="fileList" :after-read="afterRead" :max-count="1" :before-delete="removePhoto" />
        <div>
            <van-button size="small" plain type="success" @click="savePhoto">点击保存</van-button>
        </div>
    </div>
    <!-- 表单组件 -->
    <van-form @failed="onFailed">
        <van-cell-group inset>
            <!-- 昵称 -->
            <van-field  label="昵称" v-model="formInfo.user_nick_name" placeholder="用户昵称" :rules="[{ message: '请输入正确内容' }]" />
            <!-- 年龄 -->
            <van-field label="年龄"  v-model="formInfo.user_age" placeholder="年龄" :rules="[{ message: '请输入正确内容' }]" />
            <!-- 性别 -->
            <!-- <van-field v-model="formInfo.user_sex" placeholder="性别" /> -->
            <van-field name="radio" label="性别">
                <template #input>
                    <van-radio-group v-model="formInfo.user_sex" direction="horizontal">
                        <van-radio name="男">男</van-radio>
                        <van-radio name="女">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <!-- 通过 validator 进行异步函数校验 -->
            <van-field  label="地址" v-model="formInfo.user_address" placeholder="地址" />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="success" @click="saveUserInfo" size="small">
                修改资料
            </van-button>
        </div>
    </van-form>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { setUserPicUrl, uploadPhotoFunc, removePhotoFunc, getUserPicUrl, setUserInfo, getUserInfo } from '../api/index'
import { showToast} from 'vant'
const $router = useRouter()
let img = ref()
// { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
const fileList: any = ref([])

// user_nick_name(昵称)  user_sex（性别） user_age（年龄） user_address（地址）
let formInfo: any = reactive({
    user_nick_name: '',
    user_sex: '',
    user_age: 0,
    user_address: ''
})
const onFailed = (errorInfo: any) => {
    console.log('failed', errorInfo);
};
const onClickLeft = () => $router.back()
// 上传预览
const afterRead = async (file: any) => {
    // 此时可以自行将文件上传至服务器
    // console.log(file);
    if (file) {
        let formData = new FormData()
        formData.append('photo', file.file)
        await uploadPhotoFunc(formData).then(
            content => {
                // console.log('1.0',content)
                if (content.code == 200) {
                    img.value = content.picUrl
                }
            }
        )
    }
}
// 删除预览图片
const removePhoto = () => {
    if (img.value) {
        // console.log({ picUrl: img.value })
        removePhotoFunc({ picUrl: img.value })
            .then(
                content => {
                    console.log('2.0', content);
                    if (content.code == 200) {
                        fileList.value = [];
                    }
                }
            )
    }
}
// 保存用户头像
const savePhoto = async () => {
    if (img.value) {
        await setUserPicUrl({ user_picUrl: img.value })
            .then(
                content => {
                    console.log('3.0', content);
                    // if(content.code == 200){
                    //     // 提示
                    // }
                }
            )
    }
}

// 初始化方法
const initFn = async () => {
    // 获取用户头像
    await getUserPicUrl().then(
        content => {
            // console.log('1.0',content)
            if (content.code == 200) {
                // 设置头像
                img.value = content.user_url;
                // 查看头像
                fileList.value = [{ url: content.user_url }]
            }
        }
    )
    // 获取用户资料
    await getUserInfo().then(
        content => {
            console.log('2.0', content)
            if (content.code == 200) {
                // 解构赋值
                let { user_nick_name, user_age, user_address, user_sex } = content.result[0];
                // 赋值
                // formInfo.user_acc = user_acc;
                formInfo.user_nick_name = user_nick_name;
                formInfo.user_age = user_age;
                formInfo.user_address = user_address;
                formInfo.user_sex = user_sex;
            }
        }
    )
}
initFn()

// 保存资料
const saveUserInfo = async () => {
    // 调用修改资料的接口
    await setUserInfo(formInfo)
        .then(
            content => {
                // console.log('3.0', content)
                showToast(content.msg)
                if (content.code == 200) {
                    initFn();
                }
            }
        )
}


</script>

<style lang="less">
:root {
    --van-nav-bar-icon-color: #000;
    --van-field-label-width: 1.3333rem;
    --van-font-bold: normal;
}

.edit-box {
    padding: .4rem .4rem;

    .van-button--plain.van-button--success {
        width: 80px;
    }
}
</style>